<template>
  <div class="border" v-if="tableList.length">
    <div class="topTitle">古镇分布详情</div>
    <div class="content">
      <div class="head">
        <div class="head-item">序号</div>
        <div class="head-item">古城名称</div>
        <div class="head-item">地址</div>
        <div class="head-item">面积</div>
      </div>
      <div class="body">
        <div class="row" v-for="item in tableList" :key="item.id" @click="clickAncient(item.id)">
          <div class="col">{{ item.id }}</div>
          <div class="col">{{ item.name }}</div>
          <div class="col">{{ item.address }}</div>
          <div class="col">{{ item.area }} km²</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" props>
import { ref, onMounted } from 'vue'
import { getAncienLayer } from '@/api/home'

//列表数据
const tableList = ref([
  {
    id: 1,
    name: '周庄古镇',
    address: '昆山市',
    area: '**'
  },
  {
    id: 2,
    name: '同里古镇',
    address: '吴江区',
    area: '**'
  },
  {
    id: 3,
    name: '甪直古镇',
    address: '吴中区',
    area: '**'
  },
  {
    id: 4,
    name: '木渎古镇',
    address: '吴中区',
    area: '**'
  },
  {
    id: 5,
    name: '千灯古镇',
    address: '昆山市',
    area: '**'
  },
  {
    id: 6,
    name: '锦溪古镇',
    address: '昆山市',
    area: '**'
  }
])

const clickAncient = (id: number) => {
  fdapi.marker.focus('ancient_marker_' + id, 500)
  fdapi.marker.showPopupWindow('ancient_marker_' + id)
}

onMounted(async () => {
  const { data } = await getAncienLayer()
  tableList.value.length = 0
  data.features.forEach((item: any) => {
    const id = item.properties.index
    const name = item.properties.name
    const address = item.properties.address
    const area = item.properties.area_km

    tableList.value.push({
      id,
      name,
      address,
      area
    })
  })
})
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.border {
  cursor: pointer;
  position: absolute;
  @include Width(480);
  @include hHeight(400);
  @include Bottom(30);
  @include Left(460);
  background-size: 100% 100%;
  background: url('./images/right_broadBg.png') no-repeat;
  z-index: 200;
  .topTitle {
    color: #fff;
    @include FontSize(26);
    position: absolute;
    @include Top(85);
    @include Left(140);
    font-weight: bold;
    font-family: Tencent;
    text-shadow: 2px 2px 10px #499774;
  }
  .content {
    display: flex;
    flex-direction: column;
    @include Padding(50, 10, 10, 10);
    @include MarginTop(90);
    @include MarginLeft(40);
    @include hHeight(380);
    z-index: 112;

    .head {
      display: flex;
      background: rgba(51, 153, 102, 0.7);
      @include LineHeight(28);
      @include FontSize(18);

      .head-item {
        text-align: center;
        @include Padding(10, 0, 10, 0);
        &:first-child {
          @include Width(40);
        }

        &:nth-child(2) {
          @include Width(150);
        }

        &:nth-child(3) {
          @include Width(160);
        }

        &:nth-child(4) {
          @include Width(80);
        }
      }
    }

    .body {
      flex: 1;
      overflow-y: hidden;
      @include FontSize(14);

      .row {
        display: flex;
        width: 100%;
        @include Padding(12, 0, 12, 0);
        box-sizing: border-box;
        &:hover {
          background: rgba(117, 209, 163, 0.6) !important; //#101c2b75 778292
        }
        .col {
          text-align: center;
          margin: auto;
          @include FontSize(16);

          &:first-child {
            @include Width(40);
          }

          &:nth-child(2) {
            @include Width(150);
          }

          &:nth-child(3) {
            @include Width(160);
          }

          &:nth-child(4) {
            @include Width(80);
          }
        }

        &:nth-child(even) {
          // background: #ffffff20;
          // color: burlywood;
          background: rgba(117, 209, 163, 0.2); //#101c2b75 778292
        }
      }
    }
  }
}
</style>
